<template>
  <div class='my-container'>
    <el-card class='my-form'>
      <el-form>
        <el-form-item label='数据集类型'>
          <el-select v-model='datasetType'>
            <el-option :label="ORIGIN_DATASET_CN" :value="ORIGIN_DATASET_CN"></el-option>
            <el-option :label="TRAIN_DATASET_CN" :value="TRAIN_DATASET_CN"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label='文件类型'>
          <el-radio-group v-model='fileType'>
            <el-radio value='json'>json</el-radio>
            <el-radio value='pseudo_json'>假json</el-radio>
            <el-radio value='csv' disabled>csv</el-radio>
            <el-radio value='excel' disabled>excel</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label=''>
          <el-upload class='upload-demo' v-model:file-list='fileList' :limit='1' :auto-upload='false' drag
                     style='width: 100%'>
            <el-icon class='el-icon--upload'>
              <upload-filled />
            </el-icon>
            <div class='el-upload__text'>
              拖拽文件或 <em>点击上传</em>
            </div>
            <template #tip>
              <div class='el-upload__tip'>
                一次上传一个文件，不超过1MB
              </div>
            </template>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <div style="display: flex; justify-content: center;">
            <el-button type='success' @click='submitFile'>提交</el-button>
            <el-button type='primary' @click='resetAll'>重置</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { uploadOriginDataset, uploadTrainDataset } from '/src/api/index'
import { useUserStore } from '/src/stores/user'
import { UploadFilled } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { ORIGIN_DATASET_CN, TRAIN_DATASET_CN } from '@/constant.js'

const useUser = useUserStore()
const datasetType = ref(ORIGIN_DATASET_CN)
const fileType = ref('json')
const fileList = ref([])

const submitFile = () => {
  // 判断用户是否添加了文件
  if (fileList.value.length === 0) {
    ElMessage.warning('请先添加文件')
    return
  }
  const formData = new FormData()
  // 添加标签到表单数据
  formData.append('username', useUser.userInfo?.username)
  formData.append('fileType', fileType.value)
  formData.append('datasetType', datasetType.value)
  // 将每个文件添加到表单数据
  for (let i = 0; i < fileList.value.length; i++) {
    formData.append('files', fileList.value[i].raw, fileList.value[i].name)
  }

  // 根据用户选择，来转发到不同的请求URL
  let promise;
  if (datasetType.value === ORIGIN_DATASET_CN) {
    promise = uploadOriginDataset(formData)
  } else if (datasetType.value === TRAIN_DATASET_CN) {
    promise = uploadTrainDataset(formData)
  }

  promise.then(resp => {
    if (resp.data.status === 200) {
      ElMessage.success(resp.data.message)
    } else {
      ElMessage.error(resp.data.message)
    }
  }).catch(e => {
    ElMessage.error('文件上传失败')
  })

}

const resetAll = () => {
  datasetType.value =ORIGIN_DATASET_CN
  fileType.value = 'json'
  fileList.value = []
}
</script>

<style scoped>
.my-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #000000;
}

.my-form {
  width: 20%;
  /*background-color: #ABABAB;*/
  color: #333;
}
</style>